<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <mycom1></mycom1>
    </div>
    
    <script>
        //1.组件可以有自己的data数据
        //2.组件的data和实例的data有点不一样，实例中的data可以为一个对象，组件中的data必须为方法
        //3.组件中的data除了必须为一个方法外，，这个方法内部还必须返回一个对象才行
        //4.组件中的data数据， 使用方式和实例中的data使用方式完全一样
       Vue.component('mycom1', {
           template: "<h1>这是全局组件 ---{{  msg }}</h1>",
           data: function() {
               return {
                   msg: "这是组件中的data定义的数据"
               }
           }
       })

        var vm = new Vue({
            el:"#app",
            data:{},
            methods: {}
        })
    </script>
</body>
</html>